Google Fontsを利用して、Angular6で作ったサイトのフォントを変えてみる
どうも！大阪オフィスの西村祐二です。フォントは見る側に与える印象を変えたりとても重要な要素です。今回、Google Fontsで提供されているwebフォントを使って、Angular6で作ったサイトのフォントを変更してみました。
どうも！大阪オフィスの西村祐二です。
今回はGoogle Fontsで提供されているwebフォントを使って、Angular6で作ったサイトのフォントを変更してみたいと思います。
ちなみに、Google FontsはGoogle が提供している Web Fonts のサイトです。無料で利用することができます。
日本語のフォントも利用可能
数は少ないですが、日本語フォントも利用できます。もちろん無料です。
https://googlefonts.github.io/japanese/
Angular6で作ったサイトの日本語フォントをかえてみる
環境
- Angular CLI: 6.0.8
- Node: 9.6.1
- OS: darwin x64
- Angular: 6.0.4
利用フォント
フォントが変更されているか確認しやすいように、「ニコモジ Nico Moji」というフォントを適用してみたいと思います。
サイト作成
Angular CLIインストール
$ npm install -g@latest
雛形作成
$ ng new web-font $ cd web-font
デフォルトのページを下記に編集
$ vi src/app/app.component.html <h1>まいど！おおきに！</h1>
ローカルサーバを起動して確認
$ ng serve --open
自動的にページが開き、下記のようになるかと思います。
Webフォントの設定
サイトからHTMLとCSSをコピーしておきます。
https://googlefonts.github.io/japanese/#nicomoji
サイト全体に設定できるsrc/index.htmlのheadタグ内にコピーした値を追加します。
$ vi src/index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tutorial</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" /> </head> <body> <app-root></app-root> </body> </html>
サイト全体のスタイルを設定できるsrc/styles.cssのコピーした値を追加します。スコープはhtml,bodyに変更しています。
$ vi src/styles.css
/* You can add global styles to this file, and also import other style files */
html, body {
font-family: "Nico Moji";
}
これで設定は完了です。ブラウザに戻ると、フォントが適用されています。
さいごに
いかがだったでしょうか。
Google Fontsで提供されているwebフォントを使って、Angular6で作ったサイトのフォントを変更してみました。
誰かの参考になれば幸いです。
